<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/static/css/style.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_379791_2cyjes73tt5fusor.css">
    <link href="js/main.js">
    <title>会员</title>
</head>
<body>
    <div class="header-area">
        <div class="content">
            <img th:src="@{${avatar}}" src="/static/images/zhuomian.jpg">
            <p style="color: rgba(255,255,255,0.8);" th:text="${level}">Lv6</p>
            <p class="p-name" th:text="${nickName}">这是我的地盘</p>

            <p th:if="${nexLvExp >= currentExp}">还需要<span th:text="${nexLvExp}-${currentExp}">100</span>经验值升到<span th:text="${level}+1">Lv7</span></p>
            <p th:if="${nexLvExp < currentExp}">满级!</p>

            <div class="content-experience">
                <div  id="bar"class="bar">
                    <div id="experience" class="experience" ></div>
                </div>
                <span class="iconfont icon-dengji content-grade" th:text="${level}">Lv1</span>

                <div th:if="${nexLvExp > currentExp}">
                    <input type="hidden" th:value="${currentExp}/${nexLvExp}" id="obj"/>
                    <span class="content-percentage iconfont"  th:text="((${currentExp})/${nexLvExp} * 100) + '%'">50%</span>
                </div>
                <div th:if="${nexLvExp < currentExp}">
                    <input type="hidden" th:value="1" id="obj"/>
                    <span class="content-percentage iconfont"  th:text="100+'%'">50%</span>
                </div>

            </div>
        </div>
    </div>

    <div class="grade-area">
        <h3>--&nbsp;&nbsp;等级特权&nbsp;&nbsp;--</h3>
        <div class="grade-content">

            <div class="content-top">
               <div class="module">
                  <div>
                    <div class="img-out a_gradient">
                       <img src="/static/images/icon/huanying.png">
                   </div>
                   <p>欢迎进场</p>
                   <span>LV20开启</span>
               </div>
           </div>
           <div class="module">
            <div>
                <div class="img-out b_gradient">
                    <img src="/static/images/icon/gift.png">
                </div>
                <p>道具礼包</p>
                <span>LV40开启</span>

            </div>            
        </div>
        <div class="module">
            <div>
                <div class="img-out c_gradient">
                    <img src="/static/images/icon/baoxiang.png">
                </div>
                <p>神秘宝箱</p>
                <span>LV60开启</span>

            </div>           
        </div>
    </div>
    <div class="content-bottom">
        <div class="module">
            <div>
                <div class="img-out d_gradient">
                    <img src="/static/images/icon/baoshijie.png">
                </div>
                <p>荣耀坐骑</p>
                <span>LV80开启</span>

            </div>         
        </div>
        <div class="module">
            <div>
                <div class="img-out e_gradient">
                    <img src="/static/images/icon/che.png">
                </div>
                <p>超管车队</p>
                <span>LV100开启</span>
            </div>
        </div>
        <div class="module">
            <div>
                <div class="img-out f_gradient iconfont icon-huangguan">

                </div>
                <p>欢定制进场效果</p>
                <span>LV120开启</span>
            </div>
        </div>
    </div>
    <p>更多特权 &nbsp;&nbsp;&nbsp;&nbsp;尽请期待</p>
</div>
</div>
<div class="upgrade-area">
    <h3>--&nbsp;快速升级小提示&nbsp;--</h3>
    <div class="upgrade-content">
        <ul>
            <li>
                <div class="icon iconfont icon-liwu1"></div>
                <div class="upgrade-text">
                    <div>赠送礼品</div>
                    <span>礼物刷起来，经验飞快涨</span>
                </div>
            </li>
            <li>
                <div class="icon iconfont icon-renwu"></div>
                <div class="upgrade-text">
                    <div>去做任务</div>
                    <span>去做任务，经验呼呼的</span>
                </div>
            </li>
            <li>
                <div class="icon iconfont icon-qiandao"></div>
                <div class="upgrade-text">
                    <div>天天签到</div>
                    <span>经验再少也是经验啊</span>
                </div>
            </li>
            <li>
                <div class="icon iconfont icon-dingzhi1"></div>
                <div class="upgrade-text">
                    <div>定制礼品</div>
                    <span>定制的最牛逼</span>
                </div>
            </li>
            <li>
                <div class="icon iconfont icon-zuanshi"></div>
                <div class="upgrade-text">
                    <div>成为贵族</div>
                    <span>我是贵族，还怕没经验</span>
                </div>
            </li>
            <li>
                <div class="icon iconfont icon-dingzhijiaoyi"></div>
                <div class="upgrade-text">
                    <div>定制法拉利</div>
                    <span>赠送法拉利,经验飞快涨</span>
                </div>
            </li>
            <li>
                <div class="icon iconfont icon-youting"></div>
                <div class="upgrade-text">
                    <div >赠送游艇</div>
                    <span>听说送法拉利挺厉害</span>
                </div>
            </li>
            <li>
                <div class="icon last-none iconfont icon-fenxiang"></div>
                <div class="upgrade-text last-none">
                    <div>分享直播</div>
                    <span>分享也能涨经验啊</span>
                </div>
            </li>
        </ul>
    </div>
</div>

<script>
    var total = 100; //总数
    var curN = 50; //当前值
    function show()
    {
        var o = document.getElementById("experience");
        o.style.width = ((curN / total) * 200) + 'px'; 
    }
    show();
    var obj = document.getElementById("obj");
    var con = document.getElementById("experience");

    con.style.width = obj.value * 100 * 2 + "px";
</script>
</body>
</html>